import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import '../model/Goods.dart';
import '../components/stepper.dart';
import '../routers/routers.dart';
import '../components/CartModalContent.dart';

class GoodsList extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _GoodsListState();
  }
}

class _GoodsListState extends State<GoodsList> with SingleTickerProviderStateMixin {

  ScrollController scrollController = new ScrollController(initialScrollOffset: 0.0);
  List goodsList = new List();

  @override
  void initState() {
    setState(() {
      goodsList.addAll([
        new Goods(img: 'assets/images/p1.jpg',title: '哇哈哈营养快线', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p2.jpg',title: '哇哈哈C蜜桃', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p3.jpg',title: '哇哈哈营养快线1', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p1.jpg',title: '派乐滋果滋源黄桃味', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p2.jpg',title: '坤峰黄金冠黄桃罐头', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p3.jpg',title: '哇哈哈冰红茶', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p1.jpg',title: '哇哈哈营养快线', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p2.jpg',title: '哇哈哈C蜜桃', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p3.jpg',title: '哇哈哈营养快线1', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p1.jpg',title: '派乐滋果滋源黄桃味', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p2.jpg',title: '坤峰黄金冠黄桃罐头', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' ),
        new Goods(img: 'assets/images/p3.jpg',title: '哇哈哈冰红茶', price: 8.25, total: '1箱10瓶装', spec: '4.2元/瓶' )
      ]);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: PreferredSize(
            child: AppBar(
              title: Text('商城')
            ),
            preferredSize: Size.fromHeight(MediaQuery.of(context).size.height * 0.06),
          ),
          body: Column(
            children: <Widget>[
              Container(
                height: 12.0,
              ),
              Expanded(
                child: _RenderList()
              )
            ],
          )
      );
  }

  Widget _RenderList() {
    return ListView.separated(
        controller: scrollController,
        itemCount: goodsList.length,
        separatorBuilder: (BuildContext context, int index) => Divider(color: Colors.grey,),
        itemBuilder: (BuildContext context, int index) {
          var goods = goodsList[index];
          return GestureDetector(
            onTap: () => showCart(context,goods),
            child: ListTile(
              leading: Image.asset(goods.img),
//            isThreeLine: true,
              title: Container(
//              margin: EdgeInsets.only(top: 10.0),
                alignment: Alignment.centerLeft,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('${goods.title}',style: TextStyle(fontSize: 14),),
                    Text('${goods.total}',style: TextStyle(fontSize: 12,color: Colors.grey),),
                    Row(
                      children: <Widget>[
                        Text.rich(TextSpan(
                          children: [
                            TextSpan(
                                text: '￥',
                                style: TextStyle(fontSize: 12,color: Colors.red)
                            ),
                            TextSpan(
                                text: '${goods.price}',
                                style:  TextStyle(fontSize: 15,fontWeight: FontWeight.w500,color: Colors.red)
                            ),
                          ],
                        )),
                        Container(
                          margin: EdgeInsets.only(left: 8.0),
                          child: Text('${goods.spec}',style: TextStyle(fontSize: 12,color: Colors.grey),),
                        )
                      ],
                    ),
                  ],
                ),
              ),
              trailing: Icon(Icons.shopping_cart,color: Colors.red,),
            ),
          );
        }
    );
  }
  
  Widget showCart(BuildContext context,Goods goods) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return GestureDetector (
            onTap: () => {},
            child: Container(
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(10.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Image.asset(goods.img,width: 75.0,),
                        Container(
                          margin: EdgeInsets.only(left: 10.0,top: 5.0),
//                      alignment: Alignment.topLeft,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Container(
                                margin: EdgeInsets.only(bottom: 30.0),
                                child: Text('${goods.title}',style: TextStyle(fontSize: 14),),
                              ),
                              Row(
                                children: <Widget>[
                                  Text.rich(TextSpan(
                                    children: [
                                      TextSpan(
                                          text: '￥',
                                          style: TextStyle(fontSize: 12,color: Colors.red)
                                      ),
                                      TextSpan(
                                          text: '${goods.price}',
                                          style:  TextStyle(fontSize: 15,fontWeight: FontWeight.w500,color: Colors.red)
                                      ),
                                    ],
                                  )),
                                  Container(
                                    margin: EdgeInsets.only(left: 8.0),
                                    child: Text('${goods.spec}',style: TextStyle(fontSize: 12,color: Colors.grey),),
                                  )
                                ],
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Divider(height: 1.0,color: Colors.grey,),
                  Container(
                    margin: EdgeInsets.only(left: 12.0,top: 10.0,bottom: 0.0),
                    child: Text('请选择规格',style: TextStyle(fontSize: 14,color: Colors.grey[600])),
                  ),
                  new CartModalContent(),
                  Container(
                    margin: EdgeInsets.only(left: 12.0),
                    child: Row(
                      children: <Widget>[
                        Container(
                          child: Text('选择数量',style: TextStyle(fontSize: 14.0,color: Colors.grey[600]),),
                        ),
                        Container(
                          margin: EdgeInsets.only(left: 180.0,),
                          child: SyStepper(
                            onChange: (v) => {}
                          ),
                        )
                      ],
                    ),
                  ),
                  Expanded(child: Container()),
                  Container(
//                    margin: EdgeInsets.only(top: 37.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          width: 65.0,
                          height: 45.0,
                          child: FlatButton(
                              color: Colors.grey[300],
                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0)),
                              child: IconButtonColumn(Icons.home,'首页'),
                              onPressed: () =>{}
                          ),
                        ),
                        Container(
                          width: 78.0,
                          height: 45.0,
                          child: FlatButton(
                              color: Colors.grey[300],
                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0)),
                              child: IconButtonColumn(Icons.shopping_cart,'购物车'),
                              onPressed: () =>{}
                          ),
                        ),
                        Container(
                          height: 45.0,
                          child: FlatButton(
                              color: Colors.orangeAccent,
                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0)),
                              textColor: Colors.white,
                              child: Text('加入购物车'),
                              onPressed: () =>{}
                          ),
                        ),
                        Expanded(
                          child: Container(
//                            width: 7.0,
                            height: 45.0,
                            child: FlatButton(
                                color: Colors.red,
                                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0)),
                                textColor: Colors.white,
                                child: Text('立即购买'),
                                onPressed: () {
                                  Navigator.pop(context);
                                  Routes.router.navigateTo(context, '${Routes.cardGoodsList}',transition: TransitionType.inFromRight);
                                }
                            ),
                          )
                        )
                      ],
                    ),
                  ),
                ],
              ),
            )
          );
        }
    );
  }
}

class IconButtonColumn extends StatelessWidget {
  final IconData icon;
  final String label;
  IconButtonColumn(
      this.icon,
      this.label, {Key key})
      :super(key: key);

  @override
  Widget build(BuildContext context) {
    Color color = Theme.of(context).primaryColor;

    return GestureDetector(
      onTap: () => {},
      child: new Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, color: Colors.grey[500]),
          new Container(
//            margin: const EdgeInsets.only(top: 8.0),
            child: new Text(
              label,
              style: new TextStyle(
                fontSize: 13.0,
                fontWeight: FontWeight.w300,
                color: Colors.grey[500],
              ),
            ),
          ),
        ],
      ),
    );
  }
}